<template>
  <div class="Login-container">
    <el-container class="container">
      <el-aside class="left-container"></el-aside>
      <el-main class="right-container">
        <el-form
          ref="loginFormRef"
          style="width: 60%"
          :model="user"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="账号" prop="loginAct">
            <el-input v-model="user.loginAct" />
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd">
            <el-input v-model="user.loginPwd" type="password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login(loginFormRef)"> 登录 </el-button>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="rememberMe" label="记住我" />
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts" name="Login">
// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
// const router = useRouter()
// const route = useRoute()
import { reactive, ref, onMounted } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'
import httpRequest from '@/http/httpRequest'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
interface IUser {
  loginAct: string
  loginPwd: string
}
const loginFormRef = ref<FormInstance>()
const user = reactive<IUser>({
  loginAct: '',
  loginPwd: '',
})
const rules = reactive<FormRules<IUser>>({
  loginAct: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
  loginPwd: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
})

const login = async (formEl: FormInstance | undefined) => {
  console.log('rememberMe', rememberMe.value)

  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let formData = new FormData()
      formData.append('loginAct', user.loginAct)
      formData.append('loginPwd', user.loginPwd)
      httpRequest
        .doPost('/api/login', formData)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage({
              showClose: true,
              message: '登录成功',
              type: 'success',
            })
            window.localStorage.removeItem('dlyk_login_token')
            window.localStorage.removeItem('buttonPermission')
            window.localStorage.setItem('dlyk_login_token', res.data.data)
            router.push({
              path: '/home',
            })
          } else {
            ElMessage({
              showClose: true,
              message: '登录失败，' + res.data.msg,
              type: 'error',
            })
          }
        })
        .catch((err) => {
          ElMessage({
            showClose: true,
            message: '登录失败，' + err.getMessage(),
            type: 'error',
          })
        })
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
let rememberMe = ref(false)

const freeLogin = () => {
  let token = window.localStorage.getItem('dlyk_login_token')
  if (token) {
    httpRequest
      .doGet('/api/login/free', {})
      .then((res) => {
        if (res.data.code == 200) {
          router.push({
            path: '/home',
          })
        } else {
          ElMessageBox.alert('免登录失败，请手动登录', '登录异常', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: '确认',
            callback: (action: Action) => {},
            type: 'error',
          })
        }
      })
      .catch((error) => {})
  }
}
onMounted(() => {
  freeLogin()
})
</script>

<style scoped lang="scss">
.Login-container {
  width: 100%;
  height: calc(100vh);

  .container {
    width: 100%;
    height: 100%;

    .left-container {
      width: 40%;
      height: 100%;
      background-color: black;
    }

    .right-container {
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>
